<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据分析页面</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <script src="/js/jquery.min.js"></script>

</head>
<body>
<a href="/dao/daoru"><button type="button"  class="btn btn-default" title="导入"><i class="fa fa-trash-o" ></i> 导入</button></a>
    <div class="caption">
        <h1>中国社会扶贫网(用户信息统计)</h1>
        <div class="row">
            <h2>扶贫网七日内用户信息统计</h2>
            <p><button class="btn btn-success">日</button><button class="btn btn-success">周</button><button class="btn btn-success">月</button></p>
           <div>
                <!-- 图表-->
               <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
               <div id="tu1" style="height:400px"></div>
           </div>
        </div>
        <div class="row">
            <h2>扶贫网总注册信息统计 男女比列统计
                <button type="button" class="btn btn-success" onclick="showSexData()">统计</button>
            </h2>
            <div id="tu2" style="height:400px"></div>
        </div>
        <div class="row">
            <h2>扶贫网总注册信息统计 不同角色统计</h2>
            <div id="tu3" style="height:400px"></div>
        </div>
    </div>

</body>
<!-- ECharts单文件引入 -->

<script src="/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '/dist'
            }
        });

        function showSexData() {

            //ajax 去后台查数据
            $.ajax({
                url: '/dao/getData',
                type: 'POST',
                success: function (result) {
                    console.log(result);
                    console.log(result.sexData);
                    // 使用

                    require(
                        [
                            'echarts',
                            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                            'echarts/chart/pie'//饼状图
                        ],
                        function (ec) {
                            // 基于准备好的dom，初始化echarts图表
                            var tu1 = ec.init(document.getElementById('tu1'));
                            var a = "";

                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                legend: {
                                    data: ['爱心人士', '贫困户', '管理员']
                                },
                                toolbox: {
                                    show: true,
                                    feature: {
                                        saveAsImage: {show: true}
                                    }
                                },
                                calculable: true,
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],


                                xAxis: [
                                    {
                                        type: 'category',
                                        data: result.dateStrs,
                                    }
                                ],
                                series: [
                                    {
                                        name: '爱心人士',
                                        type: 'bar',
                                        stack: '总量',
                                        barWidth: 50,
                                        itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
                                        data: result.lover
                                    },
                                    {
                                        name: '贫困户',
                                        type: 'bar',
                                        stack: '总量',
                                        itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
                                        data: result.poor
                                    },
                                    {
                                        name: '管理员',
                                        type: 'bar',
                                        stack: '总量',
                                        itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
                                        data: result.admin
                                    }

                                ]
                            };
                            // 为echarts对象加载数据
                            tu1.setOption(option);
                            // 基于准备好的dom，初始化echarts图表
                            var tu2 = ec.init(document.getElementById('tu2'));
                            //后台同样是 map  {sex:[]}
                            var sexArr = []
                            var option2 = {
                                title: {
                                    text: '扶贫网男女比列分析',

                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    x: 'left',
                                    data:['','男','女']
                                },

                                calculable: true,
                                series: [
                                    {
                                        name: '访问来源',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: result.sexData

                                    }
                                ]
                            };
                            // 为echarts对象加载数据
                            tu2.setOption(option2);

                            var tu3 = ec.init(document.getElementById('tu3'));

                            var option3 = {
                                title: {
                                    text: '不同角色统计',

                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    x: 'left',
                                    data: ['贫困户', '爱心人士', '其他', '管理员']
                                },

                                calculable: true,
                                series: [
                                    {
                                        name: '访问来源',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: [
                                            {value: 10, name: '贫困户'},
                                            {value: 20, name: '爱心人士'},
                                            {value: 30, name: '其他'},
                                            {value: 30, name: '管理员'},

                                        ]
                                    }
                                ]
                            };
                            // 为echarts对象加载数据
                            tu3.setOption(option3);

                        }
                    );


                },
                dataType: 'json'
            });
        }
</script>
</html>